<template>
    <div class="app-goods" style="padding-top:50px;padding-bottom:20px">
        <div class="product-tit-con">
				<ul class="product-tit clearfloat">
					<li class="comprehensive select" @click="showContent">
						<span>综合排序</span>
                        <img src="@/assets/images/triangle.png" alt="">
					</li>
					<li><a href="" class="xlyx">销量优先</a></li>
					<li class="screen" onclick=""><span>筛选</span></li>
				</ul>
				<div class="comprehensive-con" v-if="show" >
					<ul>
						<li><a href="javascript(0);">综合排序</a></li>
						<li><a href="">价格由高到低</a></li>
						<li><a href="">价格由低到高</a></li>
					</ul>
				</div>
		</div>
        <div class="product-con-eiw clearfloat">
					<router-link :to="`details?id=${good.id}`" tag="a"
						v-for=' good in goods'
						:key = 'good.id'
					>
						<img :src=" good.spriteSheet"  style="display: block;">
						<h2>{{ good.title }}</h2>
						<p>{{  good.localPrice }}</p>
					</router-link>
        </div>
    </div>
</template>

<script>


export default {
    data(){
        return{
						show:false,
						goods:[]
        }
    },
    components:{

    },
    methods:{
        
        showContent(){
            this.show=!this.show;    
				},
				getGoods(){
					this.$http
					  .get('data.json')
						.then( res => {
              this.goods = res.data.items
              for(var i=0;i<this.goods.length;i++){
                this.goods[i].id=i
              }
							console.log(this.goods)
						})
						.catch( err => console.log( err ))
				}
		},
		created(){
			this.getGoods()
		},
}
</script>

<style lang="stylus" scoped>
@import '~styles/_reset.styl'
  .product-tit-con 
    position relative
    border-bottom .01rem solid #f0f0f0
  .product-tit
    position relative
  .product-tit li
    padding .15rem 0
    width 33.33%
    float left
    font-size .15rem
    color #1A1A1A
    text-align center
  .product-tit .select span 
    color #F99302
    padding-right .07rem
  .xlyx
    color #2b2b2b
    transition all 0.2s linear
  img 
    width .08rem
    height .05rem
  .comprehensive-con 
    
    position fixed
    top .96rem
    left 0
    width 100%
    height 100%
    background-color rgba(0, 0, 0, 0.5)
  .comprehensive-con ul  
    background-color #fff
   
  .comprehensive-con li 
    font-size: 15px
    color #1A1A1A
    padding .15rem .1rem
    border-bottom: .01rem solid #F0F0F0
    a
      color: #2b2b2b;
  .product-con-eiw a 
    float left
    width 41%
    padding 2%
    text-align center
    margin 2%
    border .01rem solid #f0f0f0
    border-radius: .04rem
  .product-con-eiw a img
    width 1.54rem
    height 1.54rem
  .product-con-eiw a h2 
    font-size .15rem
    color #1A1A1A
    padding .05rem 0
    white-space nowrap
    overflow hidden
    text-overflow ellipsis
  .product-con-eiw a p 
    font-size .15rem
    color #F99302



</style>
